<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<div class="article-heart bg-color-white"
     th:fragment="praise(article)">
    <div id="praiseBtn"
         th:class="'praise-box ' + ${article.praised ? ' active': ''} "
         th:data-target="${global.isLogin ? '' : '#loginModal'}"
         th:data-toggle="${global.isLogin ? '' : 'modal'}">
        <svg xmlns="http://www.w3.org/2000/svg" style="display:none;" class="">
            <symbol id="icon-zan" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M13.0651 3.25923C12.6654 2.21523 12.1276 1.60359 11.4633 1.40559C10.8071 1.21 10.2539 1.48626 9.97848 1.67918C9.43962 2.05668 9.17297 2.64897 9.0009 3.12662C8.93522 3.30893 8.87504 3.50032 8.82077 3.67291L8.82077 3.67292C8.80276 3.73019 8.78541 3.78539 8.76872 3.8375C8.6974 4.06017 8.63455 4.23905 8.56561 4.38315C8.07104 5.41687 7.64014 6.034 7.2617 6.43277C6.89154 6.8228 6.5498 7.0275 6.18413 7.21038C5.8887 7.35813 5.69369 7.66144 5.69365 8.00211L5.69237 17.3908C5.6923 17.8783 6.08754 18.2736 6.57511 18.2736H14.8382C15.2621 18.2736 15.5829 18.1393 15.8149 17.9421C15.9234 17.8497 15.9985 17.7554 16.0484 17.6856C16.0695 17.6561 16.088 17.6282 16.0983 17.6126L16.1017 17.6075L16.1033 17.6051L16.1194 17.5857L16.1428 17.5478C16.913 16.3019 17.4472 15.3088 17.8659 14.1183C18.3431 12.7613 18.5849 11.5853 18.6874 10.6685C18.7871 9.77617 18.7612 9.07318 18.6558 8.68779C18.5062 8.14118 18.138 7.82653 17.7668 7.66617C17.4231 7.51771 17.0763 7.49836 16.8785 7.49807L13.1134 7.44551C13.662 5.19751 13.31 3.89889 13.0651 3.25923ZM1.251 8.0848C1.22726 7.5815 1.62891 7.16046 2.13277 7.16046H3.4408C3.92832 7.16046 4.32354 7.55568 4.32354 8.04321V17.4303C4.32354 17.9178 3.92832 18.313 3.4408 18.313H2.57554C2.10419 18.313 1.71599 17.9427 1.69378 17.4718L1.251 8.0848Z"
                ></path>
            </symbol>
        </svg>
        <svg class="sprite-icon icon-zan">
            <use xlink:href="#icon-zan"></use>
        </svg>
    </div>

    <div class="praise-photos">
        <p class="approval-tips-line"
           id="praiseDesc"
           data-defult-text="真诚点赞 诚不我欺"
           th:text="${vo.article.count.praiseCount > 0} ? ${vo.article.count.praiseCount} + '人已点赞' : '真诚点赞 诚不我欺' ">
            真诚点赞 诚不我欺
        </p>
        <div class="approval-box" id="praiseUsers">
            <a class="g-user-popover approval-img" th:href="'/user/' + ${item.userId}"
                  th:each="item: ${vo.article.praisedUsers}">
                <img th:src="${item.avatar}">
            </a>
        </div>
    </div>
</div>